<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-3.6.0.min.js"></script>
		<style type="text/css">
			#c1>a,#c1>p {
				animation: moveLeft 1s linear;
				-webkit-animation: moveLeft 1s linear;
			}
			#c2>a,#c2>p {
				animation: moveTop 1s linear;
				-webkit-animation: moveTop 1s linear;
			}
			#c3>a,#c3>p {
				animation: moveRight 1s linear;
				-webkit-animation: moveRight 1s linear;
			}

			@keyframes moveLeft {
				0% {
					transform: translateX(-200px);
					opacity: 0;
				}

				25% {
					transform: translateX(-150px);
					opacity: 0.25;
				}

				50% {
					transform: translateX(-100px);
					opacity: 0.5;
				}

				75% {
					transform: translateX(-50px);
					opacity: 0.75;
				}

				100% {
					transform: translateX(0px);
					opacity: 1;
				}
			}

			@keyframes moveTop {
				0% {
					transform: translateY(200px);
					opacity: 0;
				}

				25% {
					transform: translateY(150px);
					opacity: 0.25;
				}

				50% {
					transform: translateY(100px);
					opacity: 0.5;
				}

				75% {
					transform: translateY(50px);
					opacity: 0.75;
				}

				100% {
					transform: translateY(0px);
					opacity: 1;
				}
			}
			
			@keyframes moveRight {
				0% {
					transform: translateX(200px);
					opacity: 0;
				}
			
				25% {
					transform: translateX(150px);
					opacity: 0.25;
				}
			
				50% {
					transform: translateX(100px);
					opacity: 0.5;
				}
			
				75% {
					transform: translateX(50px);
					opacity: 0.75;
				}
			
				100% {
					transform: translateX(0px);
					opacity: 1;
				}
			}
		</style>
	</head>
	<body>
		<!--
			页面的版心宽度  1251px
		-->
		<div id="box">
			<!--头部-->
			<div class="xf_header">
			</div>
			<!--头部 end-->
			<!--广告 -->
			<div class="banner">
				<a href="detail.html">
					<img src="img/bg.jpg" id="bgImg" />
				</a>
			</div>
			<!--广告 end-->
			<!-- 商品分类 -->
			<div class="cake_type">
				<div id="c1">
					<a>
						<img src="img/cake_03.jpg" />
					</a>
					<a>
						<span>AFTERNOON TEA </span>
						<span>下午茶</span>
					</a>
					<p>“一杯咖啡，一份甜点，一抹偷不走的时光”</p>
				</div>
				<div id="c2">
					<a href="list.html">
						<img src="img/cake_05.jpg" />
					</a>
					<a href="list.html">
						<span>CAKE </span>
						<span>蛋糕</span>
					</a>
					<p>“只有国王才有资格拥有的，享受众人给予的祝福”</p>
				</div>
				<div id="c3">
					<a>
						<img src="img/cake_07.jpg" />
					</a>
					<a>
						<span>SOUVENIR </span>
						<span>手信</span>
					</a>
					<p>“不在于贵，一情意，一真诚”</p>
				</div>
			</div>
			<!-- 商品分类 end -->
			<!--底部 -->
			<div class="xf_footer">
			</div>
			<!--底部 end-->
		</div>
		<script type="text/javascript">
			$(function() {
				loadHeader();
				loadFooter();
			})

			function loadHeader() {
				$.ajax({
					type: "get",
					url: "header-1.html",
					cache: false,
					success: function(html) {
						$(".xf_header").append(html)
					}
				})
			}

			function loadFooter() {
				$.ajax({
					type: "get",
					url: "footer-1.html",
					cache: false,
					success: function(html) {
						$(".xf_footer").append(html)
					}
				})
			}
		</script>
	</body>
</html>